MULTIMEDIA AND EMBEDDING IN HTML
MULTIMEDIA AND EMBEDDING IN HTML
MULTIMEDIA AND EMBEDDING IN HTML
So far in html and every other thing we have talked about, we have only talked about text and plain elements on web pages. The web would be very boring without more interactive elements like images, videos, GIFS and other multimedia that make it very interesting and attractive today. Let us start looking at how to make the web more interesting and alive with interactive content. This module explores how to use HTML to include multimedia in your web pages, including the different ways that images can be included, and how to embed video, audio and even entire webpages.
Generally, it is important to note that there is so much more multimedia than just images, audio and video we are about to look at, however for the sake of simplicity we will dwell on the basics for now and ensure to master them very efficiently.
TOPICS
Let us look at the subtopics to be covered among the multimedia elements to be discussed in today's article.
- Images in Html
We are going to explain this particular concept in detail to enable you to understand and implement it in your web pages and sites when you work on your projects.
IMAGES IN HTML
As we have heard earlier, the early web was just text, and it was really quite boring. Fortunately, the ability to embed images came along soon enough along with other types of interesting content. The <img> tag is used to embed images in html and we will see how it can be done soon enough.
HOW DO WE EMBED AN IMAGE ON A WEB PAGE
In order to put a simple image on a web page, we use the <img> element. This is a void element(it cannot have any child element or tag) that requires two attributes to be useful:
src
alt
These two attributes are very important and crucial, the src attribute contains a URL that tells the computer where exactly the address of a particular image is while the alt attribute gives information about the image. Just like the href attribute of <a> elements it can be a relative or an absolute URL, without the src attribute the <img> element will have no image to load.
Example:
Let us say the image you wanted to embed is called “html.jpg” and its in the documents directory or folder as your html page, you could embed the image like this.
<img src="html.jpg" alt=" A html image" />This also applies if the image was in another folder called images which is not the same with the html page. It would be written like this:
<img src="images/dinosaur.jpg" alt="dinosaur" />
You can see from the above address that the parent folder which contains the image is accessed first before the image itself. It is however advised that you always put the intending image in the same folder as the webpage.
Our above image code should give an image just like the example. An image called a dinosaur that contains a dinosaur image has displayed on the html web page.
The Alt Attribute
The alt attribute or alternative attribute is meant to have a textual description of the image, for use in situations where the image cannot be seen/displayed or takes a long time to load on the internet.
Let us look at how the alt attribute helps for slow loading images:
<img
src=“images/dinosaur.jpg”
alt=“The head and torso of a diameter skeleton; it has a large head with long sharp teeth”/>Advantages of the alt text
- Screen readers read out text for visually impaired persons. It describes the images for users.
- The spelling of the file path or path name might be wrong.
- Users who have turned off images to reduce data transfer volume and distractions will still get information about the image.
- Providing alt text helps with search engine optimization for better searches, the alt text matches with search queries on the internet.
You should bear in mind that the main goal when building on the internet is to make for a good user experience and so this is very important especially if the image is related to what is on the web page.
WIDTH AND HEIGHT
You can use the width and height attributes to specify the width and height of your image. You can find your images width and height in a number of ways. First let us look at the syntax to see how this is done.
<img
src= “images/dinosaur.jpg”
alt= “ The head of a dinosaur is large.”
width= “400”
height= “341” />This does not make much difference to the display normally but under normal circumstances, if the image is not displayed due to network speeds. You will notice the browser leaving a space for the image to appear in and this is very good for semantics.
IMAGES TITLES
Just like links, you can also add title attributes to images, to provide further information if needed. In our example, we could do this:
<img
src= “images/dinosaur.jpg”
alt= “ The head of a dinosaur is large.”
width= “400”
height= “341”
title=“A T-Rex on display in the Musuem”/>However, this not recommended title has a number of accessibility problems, mainly based around the fact that screen reader support is very unpredictable and most browsers won't show it unless you are hovering with a mouse.
A better solution is to use the HTML <figure> and <figcaption> elements. These are created for exactly this purpose to provide semantic container for figures, and to clearly link to the caption.
<figure>
<img
src="images/dinosaur.jpg"
alt="The head and torso of a dinosaur skeleton;
it has a large head with long sharp teeth"
width="400"
height="341" />
<figcaption>
A T-Rex on display in the Manchester University Museum.
</figcaption>
</figure>You can see from the entire article the embedding of images and the uses in HTML for providing more information, More will be written on video and audio content in html in the coming articles.
Want to see explanatory videos? Check our youtube channel
What's Your Reaction?
